<template>
    <div style="user-select:none;">
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <el-row>
                    <span style="padding:0 10px;font-size: 16px;">文件上传到表 <span style="padding:0 10px;color:blue; font-weight:600;"> {{tableInfo.tableName}} </span> </span>
                    <el-button
                        size="mini"
                        type="primary"
                        icon="el-icon-view"
                        @click="showDbInfo()"
                        > 查看数据库信息            
                        </el-button>
                    <el-button
                        size="mini"
                        type="primary"
                        icon="el-icon-view"
                        @click="showModelInfo()"
                        > 查看模型信息            
                    </el-button>
                </el-row>
            </div>
            <div class="control">
                <el-radio v-model="control" label="1">追加</el-radio>
                <el-radio v-model="control" label="2">覆盖</el-radio>
            </div>
             <el-upload
                    class="pop-upload"
                    ref="upload"
                    action=""
                    :limit="limit"
                    accept=".pdf"
                    :file-list="fileList"
                    :auto-upload="false"
                    :multiple="true"
                    :on-change="handleChange"
                    :on-remove="handleRemove"
                    :on-exceed="exceed"
                    :on-progress="progress">
                <el-button slot="trigger" size="small" type="primary">选取文件</el-button> 
                
                <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload" :disabled="isDisabled">上传到服务器</el-button>
             </el-upload>

        </el-card>

        <el-drawer
            title="模型详细信息" 
            :visible.sync="modelOpen"
            close-on-press-escape
            :destroy-on-close="true"
            size="50%"
            :with-header="true" append-to-body>
            <ModelInfo :modelId="modelId"></ModelInfo>
        </el-drawer>
        
        <el-drawer
            title="数据库详细信息" 
            :visible.sync="dbOpen"
            close-on-press-escape
            :destroy-on-close="true"
            size="40%"
            :with-header="true" append-to-body>
            <DbInfo :dbId="tableInfo.dbId"></DbInfo>
        </el-drawer>
    </div>    
</template>

<script>
  import { getTable, uploadData } from "@/api/db/table";

  export default {
  name: "UploadDataToTable",
  data() {
      return {
        // 遮罩层
        loading: true,
        modelOpen: false,      
        dbOpen: false ,
        control: '1',
        limit: 10,
        isDisabled: false,
        tableInfo:{
            tableName:null,
            dbId: -1
        },
        tableId: null,
        modelId: -1,   
        fileList: [],     
      }
  },
  created() {
      this.generalTableId()
  },
  methods: {
      generalTableId() {
          this.tableId = this.$route.params.tableId ;
          this.modelId = this.$route.params.modelId ;
          getTable(this.tableId).then(response => {
            this.tableInfo = response.data;
        });
    },
    showModelInfo() {
      this.modelOpen = true ;
    },
    showDbInfo() {
      this.dbOpen = true ;
    },
     // 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用,function(file, fileList)
    handleChange(file, fileList) {
        this.fileList = fileList
    },
    // 删除文件之前的钩子，参数为上传的文件和文件列表，若返回 false 或者返回 Promise 且被 reject，则停止删除。function(file, fileList)
    handleRemove(file, fileList) {
        this.fileList = fileList
    },
    //上传服务器
    submitUpload() {
        this.isDisabled = true ;
        //判断是否有文件再上传
        if (this.fileList.length === 0) {
            return this.$message.warning('请选取文件后再上传')
        }
        // 下面的代码将创建一个空的FormData对象:
        const formData = new FormData()
        // 你可以使用FormData.append来添加键/值对到表单里面；
        this.fileList.forEach((file) => {
            formData.append('pdfFiles', file.raw)
            formData.append('fileNames', file.name)
        })
        // 添加自定义参数，不传可删除
        formData.append('tableId', this.tableId)        
        formData.append('control', this.control)
                
        uploadData(formData).then(response => {
            this.fileList = [] ;
            this.isDisabled = false ;
            loading.close();
        })
        
        this.$message({
            message: '文件成功上传并解析入库',
            type: 'success'
        });        
    },
    exceed(file, fileList) {
        this.$message.error('一次最多只能上传10个文件');
    },
    progress() {

    }
  }
}

</script>

<style >
    .control {
        margin-top: 10px;
        margin-bottom: 20px;
    }
</style>